<template>
  <div class="index-single-product frss bgff">
    <img class="product-img" :src="indexSingleProduct">
    <div class="product-right fcss">
      <h3 class="product-description">现代简约白富美床上四件套卧室必备现代简约白富美床上四件套卧室必备</h3>
      <div class="time-sale frsbc">
        <span class="time">距结束: 1天09时03分39秒</span>
        <span class="sale">已抢999</span>
      </div>
      <div class="frsbc money-buy">
        <div class="money frsc">
          <span class="RMB-sign">￥</span>
          <span class="sale-price">578.00</span>
          <span class="market-price">￥999.00</span>
        </div>
        <router-link to="" class="buy" tag="span">马上抢</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      indexSingleProduct: require('@/common/image/home-single-product.png')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
.index-single-product
  padding .20rem
.product-img
  flex-shrink 0
  padding .10rem
  margin-right .30rem
  height 2.20rem
  width 2.20rem
  border 1px solid $ceb
.product-description
  margin-top .20rem
  line-height .28rem
  font-size .24rem
  color $c33
.time-sale
  width 100%
  margin-top .30rem
  font-size .22rem
.time
  padding 0 .10rem
  line-height .34rem
  border-radius 4px
  color $cff
  background-color $coupon-color
.money-buy
  margin-top .40rem
  width 100%
.sale
  color $coupon-color
.RMB-sign
  font-size .24rem
  color $coupon-color
.sale-price
  margin-right .10rem
  font-size .36rem
  color $coupon-color
.market-price
  font-size .24rem
  text-decoration line-through
  color $c99
.buy
  width 1.46rem
  line-height .48rem
  font-size .28rem
  border-radius .24rem
  text-indent .20rem
  color $cff
  background $coupon-color url('') no-repeat 1.05rem center
  background-size .28rem .28rem
</style>
